import React, { Component } from "react";
import {connect} from "react-redux"
import Header from "../../components/Header/Header";
import { Button, Input, List, Toast } from "antd-mobile";
import {actions,getUser} from "../../store/modules/register"
import {bindActionCreators} from "redux"


class Register extends Component {
  render() {
    let {user,register:{changeUser,reqRegister},history:{push}} = this.props;
    return (
      <>
        <Header title="注册"></Header>
        {/* <div>user:{JSON.stringify(user)}</div> */}
        <List.Item prefix="账号">
          <Input
            placeholder="请输入账号"
            clearable
            onChange={(v) => changeUser("phone",v )}
          />
        </List.Item>
        <List.Item prefix="昵称">
          <Input
            placeholder="请输入昵称"
            clearable
            onChange={(v) => changeUser("nickname",v )}
          />
        </List.Item>
        <List.Item prefix="密码">
          <Input
            placeholder="请输入密码"
            clearable
            onChange={(v) => changeUser("password",v)}
          />
        </List.Item>
        <div className="text-center">
          <Button color="primary" onClick={() => reqRegister(push)}>
            注册
          </Button>
        </div>
      </>
    );
  }
}
const mapStateToProps = (state)=>{
    return {
        user:getUser(state)
    }
}
const mapDispatchToProps = (dispatch)=>{
    return {
        register:bindActionCreators(actions,dispatch)
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Register);
